<template>
  <div :id="id" class=" ">
    <el-menu class=" " mode="horizontal">
      <el-submenu index="2">

        <template slot="title">
          <template v-if="user">
            <slot name="title-logined" :user="user">
              <span class="text-success">{{ user.name || (user.account || '') }}</span>
            </slot>
          </template>
          <template v-else>
            <slot name="title-unlogined">
                      <span>
                        <el-button type="text" @click="openAuthDialog('login')">登录</el-button>

                        <el-button v-if="guardConfig.allow_register|| false" type="text"
                                   @click="openAuthDialog('register')">注册</el-button>
                    </span>
            </slot>
          </template>

        </template>
        <template v-if="user">
          <slot name="logined"></slot>
          <el-menu-item>
            <el-button type="text" size="small" @click="openAuthDialog('changePass')">修改密码</el-button>
          </el-menu-item>
          <el-menu-item>
            <el-button type="text" size="small" @click="openAuthDialog('changeMobile')">修改手机号</el-button>
          </el-menu-item>
          <el-menu-item>
            <el-button type="text" size="small" @click="openAuthDialog('changeEmail')">修改邮箱</el-button>
          </el-menu-item>
          <el-menu-item>
            <el-button type="text" size="small" @click="openAuthDialog('changeProfile')">个人资料</el-button>
          </el-menu-item>
          <el-menu-item class="border-top">
            <el-button type="text" size="small" @click="openAuthDialog('logout')">退出登录</el-button>
          </el-menu-item>
        </template>
        <template v-else>
          <slot name="unlogined"></slot>
        </template>
      </el-submenu>
    </el-menu>
    <!--      登录弹框-->
    <el-dialog
        title=""
        v-if="dialogVisible.login"
        :visible.sync="dialogVisible.login"
        :destroy-on-close="true"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :append-to-body="true"
        :modal-append-to-body="true"
        custom-class="menu-auth-dialog-maxw"
        center>
      <div>
        <form-auth-login
            :auth-guard="authGuard"
            :data-guard-config="guardConfig"
            v-on:logined="eventAuthLogined"
        >

        </form-auth-login>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-row type="flex" justify="space-between">
          <el-button v-if="allowResetPass"
                     type="text" @click="openAuthDialog('forgetPass')">忘记密码 ?点此找回
          </el-button>
          <el-button v-if="allowRegister" type="text" @click="openAuthDialog('register')">
            没有账号？点此注册
          </el-button>

        </el-row>
      </div>
    </el-dialog>
    <!--      注册弹框-->
    <el-dialog
        v-if="(guardConfig.allow_register||false) && dialogVisible.register"
        ref="registerDialog"
        title="注册"
        :visible.sync="dialogVisible.register"
        :destroy-on-close="true"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :append-to-body="true"
        :modal-append-to-body="true"
        custom-class="menu-auth-dialog-maxw"
        center>
      <div>
        <form-auth-register
            :auth-guard="authGuard"
            :data-guard-config="guardConfig"
            v-on:registered="()=>{openAuthDialog('login')}"
        >

        </form-auth-register>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-row type="flex" justify="space-between">
          <el-button type="text" @click="openAuthDialog('login')">已有账号？点此登录
          </el-button>
        </el-row>

      </div>
    </el-dialog>
    <!--      忘记密码弹框-->
    <el-dialog
        v-if="allowResetPass && dialogVisible.forgetPass"
        ref="forgetPassSendDialog"
        title="忘记密码"
        :visible.sync="dialogVisible.forgetPass"
        :destroy-on-close="true"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :append-to-body="true"
        :modal-append-to-body="true"
        custom-class="menu-auth-dialog-maxw"
        center>
      <div>
        <form-auth-forget-pass :auth-guard="authGuard"
                               v-on:reseted="()=>{openAuthDialog('login')}"></form-auth-forget-pass>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-row type="flex" justify="space-between">
          <el-button type="text" @click="openAuthDialog('login')">已有账号？点此登录</el-button>
          <el-button v-if="allowRegister" type="text" @click="openAuthDialog('register')">
            没有账号？点此注册
          </el-button>
        </el-row>

      </div>
    </el-dialog>
    <!--      退出登录弹框-->
    <el-dialog
        title="退出登录"
        v-if="dialogVisible.logout"
        :visible.sync="dialogVisible.logout"
        :destroy-on-close="true"
        :append-to-body="true"
        :modal-append-to-body="true"
        custom-class="menu-auth-dialog-maxw"
        center>
      <div>
        <form-auth-logout :auth-guard="authGuard"
                          v-on:logouted="eventAuthLogouted"></form-auth-logout>
      </div>
      <div slot="footer" class="dialog-footer">

      </div>
    </el-dialog>
    <!--      修改密码弹框-->
    <el-dialog
        title="修改密码"
        v-if="dialogVisible.changePass"
        :visible.sync="dialogVisible.changePass"
        :destroy-on-close="true"
        :append-to-body="true"
        :modal-append-to-body="true"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        custom-class="menu-auth-dialog-maxw"
        center>
      <div>
        <form-auth-user-change-pass :auth-guard="authGuard"
                                    v-on:changed="windownReload"></form-auth-user-change-pass>
      </div>
      <div slot="footer" class="dialog-footer">

      </div>
    </el-dialog>
    <!--      修改手机号弹框-->
    <el-dialog
        title="修改手机号"
        v-if="dialogVisible.changeMobile"
        :visible.sync="dialogVisible.changeMobile"
        :destroy-on-close="true"
        :append-to-body="true"
        :modal-append-to-body="true"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        custom-class="menu-auth-dialog-maxw"
        center>
      <div>
        <form-auth-user-change-mobile :auth-guard="authGuard"
                                      v-on:changed="windownReload"></form-auth-user-change-mobile>
      </div>
      <div slot="footer" class="dialog-footer">

      </div>
    </el-dialog>
    <!--      修改邮箱弹框-->
    <el-dialog
        title="修改邮箱"
        v-if="dialogVisible.changeEmail"
        :visible.sync="dialogVisible.changeEmail"
        :destroy-on-close="true"
        :append-to-body="true"
        :modal-append-to-body="true"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        custom-class="menu-auth-dialog-maxw"
        center>
      <div>
        <form-auth-user-change-email :auth-guard="authGuard"
                                     v-on:changed="windownReload"></form-auth-user-change-email>
      </div>
      <div slot="footer" class="dialog-footer">

      </div>
    </el-dialog>

    <!--      修改邮箱弹框-->
    <el-dialog
        title="修改个人资料"
        v-if="dialogVisible.changeProfile"
        :visible.sync="dialogVisible.changeProfile"
        :destroy-on-close="true"
        :append-to-body="true"
        :modal-append-to-body="true"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        custom-class="menu-auth-dialog-maxw"
        center>
      <div>
        <form-auth-user-profile
            :auth-guard="authGuard"
            :data-entity="user"
            :file-disk="profileFileDisk"
            v-on:changed="windownReload">

        </form-auth-user-profile>
      </div>
      <div slot="footer" class="dialog-footer">

      </div>
    </el-dialog>

  </div>


</template>
<style>
.menu-auth-dialog-maxw {
  max-width: 35em;
}
</style>
<script>

import ApiAuth from '../services/api-auth'

export default {
  components: {},
  props: {
    authGuard: {
      type: String,
      default: 'api'
    },

    /*dataUser: {
        type: Object,
        default: null
    },*/

    id: {
      type: String,
      default: 'auth-menu-' + LeUtils.randomString(6)
    },
    profileFileDisk: {
      type: String,
      default: ''
    },
  },

  data() {

    return {
      user: null,
      guardConfig: {},
      dialogVisible: {
        login: false,
        logout: false,
        register: false,
        forgetPass: false,
        profile: false,
        changePass: false,
        changeMobile: false,
        changeEmail: false,
        changeProfile: false,
      },

    }
  },
  computed: {
    allowResetPass: function () {
      return (LeUtils.valueGet(this.guardConfig, 'allow_mobile_reset_pass', false)
          || LeUtils.valueGet(this.guardConfig, 'allow_email_reset_pass', false))
          && LeUtils.valueGet(window, 'LeServiceCaptchaRegistered', false)
    },
    allowRegister: function () {
      return LeUtils.valueGet(this.guardConfig, 'allow_register', false);
    },
  },
  async created() {
    let _this = this;
    await ApiAuth.loadConfig(_this.authGuard).then(function (data) {
      _this.guardConfig = data;
    })

    ApiAuth.checkLogin(_this.authGuard).then(function ({user, token}) {
      _this.user = user;
    })


  },
  destroyed() {
    this.$root.$off('authMenu.openAuthDialog')
    this.$root.$off('authMenu.closeAuthDialog')
    this.$root.$off('authMenu.authCheckLogin')
    this.$root.$off('authMenu.authLogout')
  },
  mounted() {
    let _this = this
    this.$root.$on('authMenu.openAuthDialog', function (name) {
      return _this.openAuthDialog(name);
    });
    this.$root.$on('authMenu.closeAuthDialog', function (name) {
      return _this.closeAuthDialog(name);
    });
    this.$root.$on('authMenu.authCheckLogin', function () {
      return ApiAuth.checkLogin(_this.authGuard);
    });
    this.$root.$on('authMenu.authLogout', function () {
      //todo
      return _this.authLogout();
    });

  },
  methods: {
    joinToString: function (obj, glue) {
      return LeUtils.joinToString(obj, glue)
    },

    openAuthDialog: function (name) {
      this.closeAuthDialog();
      name = name || '';
      if (name) {
        try {
          this.dialogVisible[name] = true
        } catch (e) {

        }
      }
    },
    closeAuthDialog: function (name) {
      name = name || '';
      if (name) {
        try {
          this.dialogVisible[name] = false
        } catch (e) {

        }
      } else {
        for (let n in this.dialogVisible) {
          this.dialogVisible[n] = false;
        }
      }
    },
    eventAuthLogined: function () {
      this.user = null;
      this.closeAuthDialog('login')
      this.$emit('logined')
    },
    eventAuthLogouted: function () {
      this.user = null;
      this.closeAuthDialog('logout')
      this.$emit('logouted')
    },
    windownReload: function () {
      window.location.reload();
    }
  }
}
</script>
